<template>
  <div>
    <router-view>
      <div v-if="stated">
        <div style="height: 2vh;"></div>
        <el-card class="box-card">
          <template #header>
            <div style="font-size: 20px; font-weight: 600;">
              <span>预约记录</span>
            </div>
            <div style="height: 2vh;"></div>
            <div style="display: flex;align-items: center;">
              <div class="block">
                <el-date-picker v-model="value1" type="daterange" range-separator="To" start-placeholder="开始日期"
                  end-placeholder="结束日期" :size="size" @change="sarend" />
              </div>
              <div style="width: 15px;"></div>
              <el-select v-model="value" class="m-2" filterable placeholder="科室选择" @change="kssearch" clearable>
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
              <div style="width: 15px;"></div>
              <div style="display: flex;align-items: center;">
                <el-input v-model="input" placeholder="输入医生名称" clearable style="width:250px" @input="docsearch" />
                <div style="width: 8px;"></div>
              </div>
              <div style="display: flex;align-items: center;">
                <el-input v-model="huanz" placeholder="输入患者名称" clearable style="width:250px" @input="hzsearch" />
                <div style="width: 8px;"></div>
              </div>
              <el-select v-model="classe" class="m-2" placeholder="选择状态" @change="classstatus" clearable>
                <el-option v-for="item in optstatus" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </div>
          </template>
          <div>
            <el-table ref="multipleTableRef" style="width: 100%" stripe
              :data="tableData.slice((currentPage4 - 1) * pageSize4, currentPage4 * pageSize4)" v-loading="loading"
              max-height="60vh">
              <el-table-column label="序号" property="id" width="60" align="center" fixed />
              <el-table-column label="患者姓名" property="user_name" width="120" align="center" fixed />
              <el-table-column property="card" label="就诊卡号" width="140" align="center" />
              <el-table-column property="user_code" label="身份证号" show-overflow-tooltip width="180" align="center" />
              <el-table-column property="tel" label="手机号" show-overflow-tooltip width="140" align="center" />
              <el-table-column property="depart_name" label="挂号科室" show-overflow-tooltip width="120" align="center" />
              <el-table-column property="price" label="挂号费" show-overflow-tooltip width="120" align="center" />
              <el-table-column property="status" label="挂号状态" show-overflow-tooltip width="120" align="center">
                <template #default="scope">
                  <span v-if="scope.row.status === 1" style="color: rgb(228, 173, 55);"><el-tag class="ml-2"
                      type="warning">待审核 </el-tag></span>
                  <span v-if="scope.row.status === 2" style="color: rgb(29, 245, 21);"><el-tag class="ml-2"
                      type="success">预约成功</el-tag></span>
                  <span v-if="scope.row.status === 3" style="color: rgb(37, 130, 252);"><el-tag class="ml-2" type="">已就诊
                    </el-tag></span>
                  <span v-if="scope.row.status === 4" style="color: red;"><el-tag class="ml-2"
                      type="danger">驳回</el-tag></span>
                  <span v-if="scope.row.status === 5" style="color: rgb(85, 84, 84);"><el-tag class="ml-2"
                      type="info">已取消</el-tag></span>
                  <span v-if="scope.row.status === 6" style="color: rgb(77, 234, 10);"><el-tag class="ml-2"
                      type="success">就诊完成</el-tag></span>
                </template>
              </el-table-column>
              <el-table-column property="doctor_name" label="医生名称" show-overflow-tooltip width="120" align="center" />
              <el-table-column property="create_time" label="就诊日期" show-overflow-tooltip width="140" align="center" />
              <el-table-column property="time" label="时间区" show-overflow-tooltip width="80" align="center">
                <template #default="scope">
                  <span v-if="scope.row.time === 1" style="color: rgb(29, 245, 21);"><el-tag class="ml-2"
                      type="success">上午</el-tag></span>
                  <span v-if="scope.row.time === 2" style="color: rgb(230, 109, 35);"><el-tag class="ml-2"
                      type="warning">下午 </el-tag></span>
                </template>
              </el-table-column>
              <el-table-column property="reser_time" label="预约时间" show-overflow-tooltip width="180" align="center" />
              <el-table-column fixed="right" label="操作" width="140" align="center">
                <template #default="scope">
                  <div style="display: flex; align-items: center;justify-content: center;">
                    <el-button type="primary" plain size="small" @click="targets(scope.row.id, scope.row)">详情</el-button>
                    <el-button
                      v-if="scope.row.status == 3 || scope.row.status == 4 || scope.row.status == 5 || scope.row.status == 6"
                      type="danger" plain size="small" :disabled="false" @click="dels(scope.row.id)">删除</el-button>
                    <el-button v-else type="danger" plain size="small" :disabled="true">删除</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div style="height: 1vh;"></div>
            <div style="display:flex;justify-content: center;">
              <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
                :page-sizes="[10, 20, 50, 100]" :small="small" :disabled="disabled" :background="background"
                layout="total, sizes, prev, pager, next, jumper" :total="tableData.length" />
            </div>
          </div>
        </el-card>
      </div>
      <div v-if="defaults">
        <div style="display: flex;align-items: center;justify-content: space-between;">
          <div class="top_navigate">
            <el-button type="primary" :icon="ArrowLeftBold" @click="returned">返回</el-button>
          </div>
          <div>&nbsp;</div>
        </div>
        <div style="height: 2vh;"></div>
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>患者信息</span>
            </div>
          </template>
          <div>
            <div class="arrow">
              <div class="user_inp">
                <div style="width: 120px;color:#afafaf;">就诊人</div>
                <div>{{ itemdata.user_name }}</div>
              </div>
              <div class="user_inp">
                <div style="width: 120px;color:#afafaf;">医生姓名</div>
                <div>{{ itemdata.doctor_name }}</div>
              </div>
              <div class="user_inp">
                <div style="width: 120px; color: #afafaf;">患者头像</div>
                <!-- <div>
                <img :src="itemdata.user.avatar" alt="" style="width: 75px; height: 75px; border-radius: 180%;"
                  @click="previewImage">
                <div v-if="showPreview" class="preview-container" @click="closePreview">
                  <img :src="itemdata.user.avatar" alt="" class="preview-image">
                </div>
              </div> -->
                <el-image :src="itemdata.avatar" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
                  :preview-src-list="[itemdata.avatar]" fit="cover" preview-teleported="true"
                  style="width: 75px; height: 75px; border-radius: 180%;" />
              </div>
            </div>
            <div class="arrow">
              <div class="user_inp">
                <div style="width: 120px;color:#afafaf;">证件类型</div>
                <div>身份证</div>
              </div>
              <div class="user_inp">
                <div style="width: 120px;color:#afafaf;">证件号码</div>
                <div>{{ itemdata.user_code }}</div>
              </div>
              <div class="user_inp" style="visibility: hidden;">
                <div style="width: 120px;color:#afafaf;">患者头像</div>
                <div>张三</div>
              </div>
            </div>
            <div class="arrow">
              <div class="user_inp">
                <div style="width: 120px;color:#afafaf;">就诊人地址</div>
                <div>{{ itemdata.user_address }}</div>
              </div>
              <div class="user_inp">
                <div style="width: 120px;color:#afafaf;">手机号</div>
                <div>{{ itemdata.tel }}</div>
              </div>
              <div class="user_inp">
                <div style="width: 120px;color:#afafaf;">关系</div>
                <div>{{ itemdata.user_relationship }}</div>
              </div>
            </div>
            <div class="arrow">
              <div class="user_inp">
                <div style="width: 120px;color:#afafaf;">性别</div>
                <div v-if="itemdata.user_sex == 1">男</div>
                <div v-else-if="itemdata.user_sex == 2">女</div>
              </div>
              <div class="user_inp">
                <div style="width: 120px;color:#afafaf;">就诊时间</div>
                <div>{{ itemdata.create_time }}</div>
              </div>
              <div class="user_inp" style="visibility: hidden;">
                <div style="width: 120px;color:#afafaf;">患者头像</div>
                <div>张三</div>
              </div>
            </div>
          </div>
        </el-card>
        <div style="height: 2vh;"></div>
        <el-card class="box-card">
          <div>
            <div class="arrow">
              <div class="user_inp">
                <div style="width: 120px;color:#afafaf;">就诊医院</div>
                <div>济源仁心医院</div>
              </div>
              <div class="user_inp">
                <div style="width: 120px;color:#afafaf;">医院住址</div>
                <div>河南师济源市黄河达到***中心楼</div>
              </div>
              <div class="user_inp">
                <div style="width: 120px; color: #afafaf;">就诊科室</div>
                <div>{{ itemdata.depart_name }}</div>
              </div>
            </div>
            <div class="arrow">
              <div class="user_inp">
                <div style="width: 120px;color:#afafaf;">就诊医生</div>
                <div>{{ itemdata.doctor_name }}</div>
              </div>
              <div class="user_inp">
                <div style="width: 120px;color:#afafaf;">医生职位</div>
                <div>{{ itemdata.doctor_duties }}</div>
              </div>
              <div class="user_inp">
                <div style="width: 120px;color:#afafaf;">医生性别</div>
                <div v-if="itemdata.doctor_sex === 1">男</div>
                <div v-else-if="itemdata.doctor_sex === 2">女</div>
              </div>
            </div>
            <div class="arrow">
              <div class="user_inp">
                <div style="width: 120px;color:#afafaf;">门诊时间</div>
                <div>{{ itemdata.create_time }}</div>
              </div>
              <div class="user_inp">
                <div style="width: 120px;color:#afafaf;">就诊时间</div>
                <div>{{ itemdata.create_time }}</div>
              </div>
              <div class="user_inp">
                <div style="width: 120px;color:#afafaf;">挂号费</div>
                <div>{{ itemdata.price }}</div>
              </div>
            </div>
            <div class="arrow">
              <div class="user_inp">
                <div style="width: 120px;color:#afafaf;">预约时间</div>
                <div>{{ itemdata.reser_time }}</div>
              </div>
              <div class="user_inp">
                <div style="width: 120px;color:#afafaf;">就诊状态</div>
                <div v-if="itemdata.status === 1" style="color: rgb(228, 173, 55);"><el-tag class="ml-2"
                    type="warning">待审核 </el-tag></div>
                <div v-if="itemdata.status === 2" style="color: rgb(29, 245, 21);"><el-tag class="ml-2"
                    type="success">预约成功</el-tag></div>
                <div v-if="itemdata.status === 3" style="color: rgb(37, 130, 252);"><el-tag class="ml-2" type="">已就诊
                  </el-tag></div>
                <div v-if="itemdata.status === 4" style="color: red;"><el-tag class="ml-2" type="danger">驳回</el-tag></div>
                <div v-if="itemdata.status === 5" style="color: rgb(85, 84, 84);"><el-tag class="ml-2"
                    type="info">已取消</el-tag></div>
                <div v-if="itemdata.status === 6" style="color: rgb(77, 234, 10);"><el-tag class="ml-2"
                    type="success">就诊完成</el-tag></div>
              </div>
              <div class="user_inp">
                <div style="width: 120px;color:#afafaf;">取消原因</div>
                <div>{{ itemdata.reset_content }}</div>
              </div>
            </div>
            <div class="arrow">
              <div class="user_inp">
                <div style="width: 120px;color:#afafaf;">取消时间</div>
                <div v-if="itemdata.cance_time == null">无</div>
                <div v-else>{{ itemdata.cance_time }}</div>
              </div>
              <div class="user_inp" style="visibility:hidden;">
              </div>
              <div class="user_inp" style="visibility:hidden;">
              </div>
            </div>
            <div class="arrow" style="height: 8vh;">
              <div style="display: flex;align-items: center;width: 50%;">
                <div style="width: 120px;color:#afafaf;">挂号图片</div>
                <div v-for="(item, index) in itemdata.img" :key="index">
                  <el-image :src="item" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="[item]"
                    fit="cover" preview-teleported="true" style="width: 75px; height: 75px;margin-right: 10px;" />
                </div>
              </div>
              <div style="width: 50%;display: flex;align-items: center;">
                <div style="width: 120px;color:#afafaf;">挂号录音</div>
                <audio controls>
                  <source :src="url + itemdata.audio" type="audio/mpeg">
                </audio>
              </div>
            </div>
            <div class="arrows" style="display:flex; justify-content:space-between;">
              <div style="display: flex;align-items: center;">
                <div style="width: 120px;color:#afafaf;">备注</div>
                <div>{{ itemdata.trends }}</div>
              </div>
              <div style="position:absolute;right:20px;" v-if="boxh">
                <el-button type="success" @click="tong">审核通过</el-button>
                <el-button type="danger" @click="clocks">驳回 </el-button>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <div style="height:2vh;"></div>
    </router-view>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Yuel, Statusyy, pay_add, pay_edit, Delyy } from '@/api/user'
import { depart } from '@/api/departMents'

// import { futimes } from 'fs';
const tableData = ref([])
const datesearch = ref([])
const loading = ref(true)
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const stated = ref(true)
const defaults = ref(false)
const boxh = ref(false)
const itemdata = ref('')
const delstate = ref(false)
const value = ref('')
const formattedDates = ref('')
const value1 = ref('')
const classe = ref('')
const url = ref('http://lxt.jingyi.icu')
const rowitem = ref('')
const options = ref([])
const input = ref('')
const huanz = ref('')
const optstatus = ref(
  [
    {
      label: '待审核',
      value: 1,
    },
    {
      label: '预约成功',
      value: 2,
    },
    {
      label: '已就诊',
      value: 3,
    },
    {
      label: '驳回',
      value: 4,
    },
    {
      label: '已取消',
      value: 5,
    },
    {
      label: '已完成',
      value: 6,
    }
  ]
)
payment()
function payment() {
  Yuel().then((res) => {
    console.log(res.data);
    let updatedTableData = res.data.map(item => {
      return {
        ...item,
        img: item.img.split(',').map(imgUrl => 'http://lxt.jingyi.icu' + imgUrl.trim())
      }
    });
    console.log(updatedTableData);
    tableData.value = updatedTableData;
    datesearch.value = updatedTableData;
    loading.value = false;
    if (rowitem.value) {
      console.log(12345);
      const itemData = tableData.value.find(data => data.id == rowitem.value);
      console.log(itemData, '555');
      itemdata.value = itemData;
      if (itemdata.value.status == 3 || itemdata.value.status == 5 || itemdata.value.status == 6) {
        boxh.value = false
      } else {
        boxh.value = true
      }
      if (itemdata.value.status == 3 || itemdata.value.status == 4 || itemdata.value.status == 5 || itemdata.value.status == 6) {
        delstate.value = false
      } else {
        delstate.value = true
      }
    }
  });
}
departs()
function departs() {
  depart().then((res) => {
    console.log(res);
    for (const dataItem of res.data) {
      options.value.push({ value: dataItem.id, label: dataItem.name });
    }
  })
}
function targets(rowid, rowdata) {
  console.log(rowid);
  defaults.value = true
  stated.value = false
  itemdata.value = rowdata
  rowitem.value = rowid
  if (itemdata.value.status == 3 || itemdata.value.status == 5 || itemdata.value.status == 6) {
    boxh.value = false
  } else {
    boxh.value = true
  }
}
function returned() {
  defaults.value = false
  stated.value = true
}
function sarend() {
  formattedDates.value = []
  if (formattedDates.value.length == 0) {
    tableData.value = datesearch.value
  }
  value1.value.forEach((date) => {
    let inputDate = new Date(date);
    let year = inputDate.getFullYear();
    let month = inputDate.getMonth() + 1; // 月份从 0 开始，需要加 1
    let day = inputDate.getDate();
    let formattedDate = year + "-" + (month < 10 ? "0" + month : month) + "-" + (day < 10 ? "0" + day : day);
    formattedDates.value.push(formattedDate);
  });
  let startTimestamp = new Date(formattedDates.value[0]).getTime(); // 获取formattedDates数组的第一个日期的时间戳
  let endTimestamp = new Date(formattedDates.value[1]).getTime(); // 获取formattedDates数组的第二个日期的时间戳
  let result = tableData.value.filter(item => {
    let itemTimestamp = new Date(item.reser_time).getTime(); // 将reser_time字段转化为时间戳
    console.log(itemTimestamp, startTimestamp, endTimestamp)
    return itemTimestamp >= startTimestamp && itemTimestamp <= endTimestamp; // 判断时间戳是否在范围内
  });
  console.log(result, '日期区间');
  tableData.value = result; // 将符合条件的数据赋值给tableData.value
  console.log(formattedDates.value);
  console.log(datesearch.value, '23456');
}
function kssearch(e) {
  const matchingOption = options.value.find(option => option.value === e);
  console.log(matchingOption, '搜索科室');
  let tableks = [];

  if (matchingOption) {
    value.value = matchingOption.label;
    console.log(value.value, '科室');

    // 使用Array.prototype.filter来找到所有符合条件的值
    const matchingDeparts = datesearch.value.filter(depart => value.value == depart.depart_name);
    tableks.push(...matchingDeparts); // 将所有匹配的值添加到tableks数组中

    console.log(matchingDeparts, '筛选数据');

    if (matchingDeparts.length > 0) {
      tableData.value = tableks;
    } else {
      tableData.value = [];
    }
  } else {
    // 如果没有匹配的选项，将value.value重置为空
    value.value = '';
    tableData.value = []; // 也可以选择清空tableData.value
  }
  if (e == '' || e == undefined) {
    payment()
  }

  console.log(datesearch.value);
}
function docsearch() {
  console.log(input.value);
  let doctor = []
  if (input.value != '' || input.value != undefined) {
    const doctorData = datesearch.value.filter(depart => depart.doctor_name.includes(input.value));
    console.log(doctorData);
    doctor.push(...doctorData)
    tableData.value = doctor
  } else {
    payment()
  }
}
function hzsearch() {
  console.log(huanz.value);
  let doctor = []
  if (huanz.value != '' || huanz.value != undefined) {
    const doctorData = datesearch.value.filter(depart => depart.user_name.includes(huanz.value));
    console.log(doctorData);
    doctor.push(...doctorData)
    tableData.value = doctor
  } else {
    payment()
  }
}
function classstatus(e) {
  console.log(e, '状态赋值');
  if (e && e !== '') {
    const doctorData = datesearch.value.filter(depart => e === depart.status);
    console.log(doctorData);
    tableData.value = doctorData;
  } else {
    console.log(12345);
    payment()
  }
}
function clocks() {
  console.log(rowitem.value);
  ElMessageBox.confirm('是否确认驳回?', '驳回科室', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      Statusyy({
        id: rowitem.value,
        status: 4
      }).then((res) => {
        console.log(res);
        if (res.code == 1) {
          ElMessage({
            type: 'success',
            message: '驳回成功',
          });
          payment()
        } else {
          ElMessage({
            type: 'error',
            message: '驳回失败',
          });
        }
      })

    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      });
    });
};
function tong() {
  console.log(rowitem.value);
  ElMessageBox.confirm('是否审核通过?', '审核', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'success',
  })
    .then(() => {
      Statusyy({
        id: rowitem.value,
        status: 2
      }).then((res) => {
        if (res.code == 1) {
          ElMessage({
            type: 'success',
            message: '审核通过',
          });
          setTimeout(() => {
            defaults.value = false
            stated.value = true
            payment()
          }, 1200);
        } else {
          ElMessage({
            type: 'error',
            message: '审核失败',
          });
        }
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      });
    });
};
function dels(did) {
  console.log(rowitem.value);
  ElMessageBox.confirm('是否删除信息?', '删除', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then((action) => {
      if (action === 'confirm') {
        console.log(12);
        Delyy({
          id: did,
        }).then((res) => {
          console.log(res);
          if (res.code == 1) {
            ElMessage({
              type: 'success',
              message: '删除成功',
            });
            payment();
          } else {
            ElMessage({
              type: 'error',
              message: '删除失败',
            });
          }
        });
      } else {
        ElMessage({
          type: 'info',
          message: '取消操作',
        });
      }
    });
}
</script>

<style>
.top_navigate {
  display: flex;
  align-items: center;
}

.user_inp {
  width: 33.33%;
  display: flex;
  align-items: center;
}

.arrow {
  width: 96%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 3%;
  height: 7vh;
}

.arrows {
  width: 96%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 3%;
  height: 7vh;
}
</style>